<template>
  <el-drawer class="cupk2-query-form" v-model="drawerWin" title="I am the title2" :append-to-body="true"
    :with-header="false" size="300px">
    <div class="title">条件查询</div>
    <el-form :model="rules" label-width="auto" style="max-width: 600px">
         <el-form-item label="备注：">
        <el-input v-model="rules[0].value" />
      </el-form-item>
     <el-form-item label="名称：">
        <el-input v-model="rules[1].value" />
      </el-form-item>
     <el-form-item label="实现类CLASS：">
        <el-input v-model="rules[2].value" />
      </el-form-item>
     <el-form-item label="APIKEY：">
        <el-input v-model="rules[3].value" />
      </el-form-item>
     <el-form-item label="BASEURL：">
        <el-input v-model="rules[4].value" />
      </el-form-item>
     <el-form-item label="MODELKEY：">
        <el-input v-model="rules[5].value" />
      </el-form-item>
     <el-form-item label="代理IP：">
        <el-input v-model="rules[6].value" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onQuery">查询</el-button>
        <el-button type="info" @click="onClear">清除</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
<script setup lang="ts">
import cupkFormUtils from '@/hook/cupkFormUtils';
import type { DataRule } from '@/types/commons/DataRule';
import type { Emitter, EventType } from 'mitt';
import { inject, onMounted, reactive, ref } from 'vue';
import { PageEvent } from '@/types/commons/PageEvent';
const drawerWin = ref(false);
const eventBus = inject('eventBus') as Emitter<Record<EventType, unknown>>;


/**
 * 将查询条件绑定到表单中
 */
const rules = reactive<DataRule[]>([
      { key: 'NOTE', value: '', compara: 'like' },
      { key: 'NAME', value: '', compara: 'like' },
      { key: 'IMPLCLASS', value: '', compara: 'like' },
      { key: 'APIKEY', value: '', compara: 'like' },
      { key: 'BASEURL', value: '', compara: 'like' },
      { key: 'MODELKEY', value: '', compara: 'like' },
      { key: 'PROXYIP', value: '', compara: 'like' },
]);


/**
 * 打开或关闭高级查询窗口
 * @param isOpen
 */
const drawerIs = (isOpen: boolean) => {
  drawerWin.value = isOpen;
};
/**
 * 调用执行查询-事件
 */
const onQuery = () => {
  eventBus.emit(PageEvent.data_do_query, cupkFormUtils.getRules(rules));
}
/**
 * 清除高级查询条件
 */
const onClear = () => {
  cupkFormUtils.clearQueryForm(rules)
  onQuery();
}

onMounted(() => {

  eventBus.on(PageEvent.query_form_open, (data) => {
    drawerIs(data as boolean);
  });
  eventBus.on(PageEvent.query_form_clear, () => {
    onClear();
  });
});
</script>
